/* vue */
import { defineComponent } from "vue"
/* util */
import { getLocalesOssUrl, getOssUrl } from '@src/util/assets'
/* scss */
import '@src/component/business/BizChatBar/loading.scss'

const xiaoBaoIcon = getLocalesOssUrl('xiao-bao-animation.gif')

enum BizChatBarLoadingEventEnum {
  RETRY = 'retry',
  STOP = 'stop'
}

export default defineComponent({
  name: "BizChatBarLoading",
  props: {
    onRetry: {
      type: Function,
    },
    onStop: {
      type: Function,
    }
  },
  data() {
    return {
      xiaoBaoIcon,
    }
  },
  computed: {
    
  },
  methods: {
    onRetryHandler() {
      this.$emit(BizChatBarLoadingEventEnum.RETRY)
    },
    onStopHandler() {
      this.$emit(BizChatBarLoadingEventEnum.STOP)
    },
    renderLeft() {
      return (
        <div class="biz-chat-bar-loading-left">
          {this.renderLogo()}
          {this.renderLoadingText()}
        </div>
      )
    },
    renderLogo() {
      return (
        <div class="biz-chat-bar-loading-logo">
          <img src={this.xiaoBaoIcon} />
        </div>
      )
    },
    renderLoadingText() {
      return (
        <div class="biz-chat-bar-loading-text">
          正在回答...
        </div>
      )
    },
    renderRight() {
      return (
        <div class="biz-chat-bar-loading-right">
          {this.renderStopButton()}
        </div>
      )
    },
    renderRetryButton() {
      return (
        <el-button type="text" onClick={this.onRetryHandler}>
          <i class="iconfont icon-updete"></i>
          <span>
            重试
          </span>
        </el-button>
      )
    },
    renderStopButton() {
      return (
        <el-button 
          class="biz-chat-bar-header-danger-button" 
          type="text" 
          onClick={this.onStopHandler}
        >
          <i class="iconfont icon-jieshu"></i>
          <span>
            停止
          </span>
        </el-button>
      )
    }
  },
  render() {
    return (
      <div class="biz-chat-bar-loading">
        { this.renderLeft() }
        { this.renderRight() }
      </div>
    )
  }
})